<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老人排班 - 照护计划算法</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .schedule-table th, .schedule-table td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        
        .schedule-table th {
            background-color: #f5f5f5;
            font-weight: 600;
        }
        
        .schedule-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .schedule-table tr:hover {
            background-color: #f1f1f1;
        }
        
        .back-link {
            display: inline-block;
            margin: 20px 0;
            color: #1e88e5;
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
        
        .error-message {
            color: #d32f2f;
            background-color: #ffebee;
            padding: 10px;
            border-radius: 4px;
            margin: 20px 0;
        }
        
        .debug-info {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>老人照护计划</h1>
            <p id="elder-info">正在加载老人信息...</p>
        </header>

        <main>
            <a href="/dashboard" class="back-link">← 返回控制台</a>
            
            <div id="schedule-container">
                <h2>排班日期: <span id="schedule-date"></span></h2>
                <div id="schedule-data">
                    <p>正在加载排班数据...</p>
                </div>
                <div id="debug-info" class="debug-info"></div>
                <button id="toggle-debug" style="margin-top: 10px; display: none;" onclick="toggleDebug()">显示/隐藏调试信息</button>
            </div>
        </main>

        <footer>
            <p>照护计划算法 &copy; 2025</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL获取老人ID和日期
            const urlParams = new URLSearchParams(window.location.search);
            const elderId = urlParams.get('elder');
            let date = urlParams.get('date');
            
            // 显示日期
            document.getElementById('schedule-date').textContent = date || '未指定日期';
            
            // 检查是否有老人ID
            if (!elderId) {
                document.getElementById('elder-info').textContent = '错误: 未指定老人ID';
                document.getElementById('schedule-data').innerHTML = '<div class="error-message">请在URL中指定老人ID参数</div>';
                return;
            }
            
            // 设置老人信息
            document.getElementById('elder-info').textContent = `老人ID: ${elderId}`;
            
            // 获取排班数据
            const params = new URLSearchParams();
            params.append('elder', elderId);
            if (date) {
                params.append('date', date);
            }
            let url = `/view_schedule?${params.toString()}`;
            
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误 ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 显示调试信息
                    const debugInfo = document.getElementById('debug-info');
                    debugInfo.textContent = JSON.stringify(data, null, 2);
                    document.getElementById('toggle-debug').style.display = 'block';
                    
                    const scheduleContainer = document.getElementById('schedule-data');
                    
                    if (!data || Object.keys(data).length === 0 || data.error) {
                        scheduleContainer.innerHTML = '<p>该老人在所选日期没有排班数据</p>';
                        return;
                    }
                    
                    // 创建排班表格
                    const table = document.createElement('table');
                    table.className = 'schedule-table';
                    
                    // 添加表头
                    const thead = document.createElement('thead');
                    thead.innerHTML = `
                        <tr>
                            <th>时间段</th>
                            <th>活动</th>
                            <th>活动ID</th>
                            <th>护理人员</th>
                            <th>护理人员ID</th>
                        </tr>
                    `;
                    table.appendChild(thead);
                    
                    // 添加表格内容
                    const tbody = document.createElement('tbody');
                    
                    // 获取时间段数据
                    const timeSlots = data.time_slots || [];
                    
                    if (timeSlots.length === 0) {
                        scheduleContainer.innerHTML = '<p>该老人在所选日期没有排班数据</p>';
                        return;
                    }
                    
                    // 按时间顺序排序
                    timeSlots.sort((a, b) => {
                        const timeA = a.time_slot.split('-')[0];
                        const timeB = b.time_slot.split('-')[0];
                        return timeA.localeCompare(timeB);
                    });
                    
                    timeSlots.forEach(slot => {
                        const row = document.createElement('tr');
                        
                        row.innerHTML = `
                            <td>${slot.time_slot}</td>
                            <td>${slot.activity || '-'}</td>
                            <td>${slot.activity_id || '-'}</td>
                            <td>${slot.caregiver || '-'}</td>
                            <td>${slot.caregiver_id || '-'}</td>
                        `;
                        
                        tbody.appendChild(row);
                    });
                    
                    table.appendChild(tbody);
                    scheduleContainer.innerHTML = '';
                    scheduleContainer.appendChild(table);
                })
                .catch(error => {
                    console.error('获取排班数据失败:', error);
                    document.getElementById('schedule-data').innerHTML = `
                        <div class="error-message">
                            获取排班数据失败: ${error.message}
                        </div>
                    `;
                });
        });
        
        // 切换显示调试信息
        function toggleDebug() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
        }
    </script>
</body>
</html> 